/* eslint-disable multiline-ternary */
/* eslint-disable no-unused-vars */
// Third Party
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Col,
  Row
} from 'reactstrap'

// Components
import FloatingBtn from '../../components/addAppointment/FloatingBtn'
import ProviderCard from '../../components/provider/ProviderCard'
import Spinner from '../../components/spinner/Spinner'
import { getMyProviderAction } from '../../redux/myProvider/myProviderAction'
import { resetGetProvider } from '../../redux/myProvider/myProviderSlice'

const Provider = () => {
  const dispatch = useDispatch()

  const { getMyProvider, loading } = useSelector((state) => state.provider)
  useEffect(() => {
    dispatch(getMyProviderAction())
    return () => {
      dispatch(resetGetProvider())
    }
  }, [])
  return (
    <div>
      <Card className="padding-left margin-bottom-0 px-0">
        <CardHeader className="bgyellowish ">
          <CardTitle className="fw-bold black ">Provider</CardTitle>

          {/* <CardTitle className="AppointmentTitle d-sm-none d-lg-block d-md-block ">
            <Button size="sm" className="request-btn w-100 ">
              Request Appointment
            </Button>
          </CardTitle> */}
        </CardHeader>
        <CardBody
          className={
            loading
              ? 'p-0 py-0 card-body-styling'
              : 'p-0 py-2 card-body-styling'
          }
        >
          {loading ? (
            <Spinner />
          ) : (
            <>
              <Row>
                <Col lg="7" md="7" className="m-auto py-5">
                  <ProviderCard data={getMyProvider} />
                </Col>
              </Row>
              <FloatingBtn />
            </>
          )}
        </CardBody>
      </Card>
    </div>
  )
}

export default Provider
